<template>
  <div class="page-test_train">
    <div class="coursepos">
      <div class="breadcrumb-box">
        <a class="breadcrumb-item">{{ sub_title }}</a>
        <span class="breadcrumb-arrow">
          <van-icon name="arrow" size="16" color="#999" />
        </span>
      </div>
      <div class="menubar">
        <div class="menubarlist">
          <div class="listname">
            <p>{{ $t("locale.pc.mytest.testTrain.t1") }}:</p>
          </div>
          <div class="listbody">
            <!-- <a @click="changeType('1')">题库练习</a>
            <a @click="changeType('2')">专项考试</a>
            <a @click="changeType('3')">错题练习</a> -->
            <a @click="changeType('1')">{{
              $t("locale.pc.mytest.testTrain.t2")
            }}</a>
            <a @click="changeType('2')">{{
              $t("locale.pc.mytest.testTrain.t3")
            }}</a>
          </div>
        </div>
        <!-- <div class="menubarlist">
          <div class="listname">
            <p>学科类型:</p>
          </div>
          <div class="listbody">
            <a>全部</a>
            <a>专业1</a>
            <a>专业2</a>
            <a>专业3</a>
          </div>
        </div>
        <div class="menubarlist">
          <div class="listname">
            <p>课程类型:</p>
          </div>
          <div class="listbody">
            <a>全部</a>
            <a>直播课程</a>
            <a>点播课程</a>
            <a>题库练习</a>
          </div>
        </div> -->
      </div>
      <!-- 内容 -->
      <div class="menubarbody">
        <!-- 左边主体内容 -->
        <div class="bodyleft">
          <!-- <div class="options">
            <a href>综合推荐</a>
            <p>
              价格
              <Icon type="arrow-down-b"></Icon>
            </p>
            <a href>人气</a>
          </div> -->
          <!-- 课程展示 -->
          <div class="topiclists" v-if="[1, 3].includes(type)">
            <!-- 单个课程样式 -->
            <div
              v-if="data_list.length > 0"
              class="topicbody"
              v-for="(item, index) in data_list"
              :key="index"
            >
              <div class="topic-img">
                <img :src="item.iconPath" />
              </div>
              <div class="papername">
                <p class="title">{{ item.courseName }}</p>
              </div>

              <div class="papermessage">
                <p class="author">{{ item.acName }}《{{ item.majorName }}》</p>
              </div>
              <div class="papermessage">
                <p class="time">
                  {{ $t("locale.pc.mytest.testTrain.t4") }}：{{
                    trimDate(item.buyCourseStartDate)
                  }}
                  {{ $t("locale.pc.mytest.testTrain.t5") }}
                  {{ trimDate(item.buyCourseDeadlineDate) }}
                </p>
              </div>
              <!-- <div class="paperdetail">
                <ul>
                  <li>
                    <img
                      src="~/static/img/riLine-contacts-book-line (1).svg"
                      alt
                    />
                    <p>《{{ item.relevant_books }}》</p>
                  </li>
                  <li>
                    <img src="~/static/img/md-timelapse (1).svg" alt />
                    <p>考试限期:{{ item.teststart }} - {{ item.testover }}</p>
                  </li>
                </ul>
              </div> -->
              <!-- <i-button class="ivu-btn" @click="handleStart(item.id)"
                >开始{{
                  type == 1 || type == 3 ? "练习" : type == 2 ? "考试" : null
                }}</i-button
              > -->
              <div v-if="course_list_ids.indexOf(item.id) != -1">
                <i-button
                  class="ivu-btn"
                  v-if="item.isQuestionBank === 1"
                  @click="handleStart(item.id)"
                  >{{ $t("locale.pc.mytest.testTrain.t6") }}</i-button
                >
                <i-button
                  class="ivu-btn"
                  disabled
                  v-if="item.isQuestionBank === 0"
                  >{{ $t("locale.pc.mytest.testTrain.t7") }}</i-button
                >
              </div>
              <div v-else>
                <i-button
                  class="ivu-btn"
                  @click="toPath('/coursedetail?id=' + item.id)"
                  >{{ $t("locale.pc.mytest.testTrain.t8") }}</i-button
                >
              </div>

              <!-- <i-button :class="item.teststate != true ? 'ivu-btn' : 'unshow'"
                >去购买课程</i-button
              > -->
              <!-- <div class="teststate">
                <p>已拥有</p>
              </div> -->
              <div
                class="teststate"
                v-if="course_list_ids.indexOf(item.id) != -1"
              >
                <p>{{ $t("locale.pc.mytest.testTrain.t9") }}</p>
              </div>
            </div>
            <div class="no-data" v-if="data_list.length == 0">
              <div class="center">
                <Icon type="ios-information-circle" />
                <div class="none-text">
                  {{ $t("locale.pc.mytest.testTrain.t10") }}
                </div>
              </div>
            </div>
            <div class="pages">
              <Page
                v-if="course_record_list.length > 0"
                :total="course_record_list.length"
                :current="page"
                :page-size="pageSize"
                @on-change="handleChangePage"
                show-elevator
              ></Page>
            </div>
          </div>

          <div class="topiclists" v-if="[2].includes(type)">
            <!-- 单个课程样式 -->
            <div
              v-if="all_paper_list.length > 0"
              class="topicbody"
              v-for="(item, index) in data_my_paper_list"
              :key="index"
              style="padding-left:28px"
              :style="{ height: type == 2 ? '140px' : '175px' }"
            >
              <div class="papername">
                <p>{{ item.name }}</p>
              </div>
              <!-- <div class="papermessage">
                <p>{{ item.introduce }}</p>
              </div>
              <div class="papermessage">
                <p>总分:{{ item.total }}</p>
              </div>
              <div class="papermessage">
                <p>限时:{{ item.span }}分钟</p>
              </div> -->
              <div class="test-details">
                <p>
                  {{ $t("locale.pc.mytest.testTrain.t11") }}：{{ item.total
                  }}{{ $t("locale.pc.mytest.testTrain.t12") }}
                </p>
                <div class="separated-line"></div>
                <p>
                  {{ $t("locale.pc.mytest.testTrain.t13") }}{{ item.itemNum
                  }}{{ $t("locale.pc.mytest.testTrain.t14") }}
                </p>
                <div class="separated-line"></div>
                <p>{{ item.span }}{{ $t("locale.pc.mytest.testTrain.t15") }}</p>
                <!-- <div class="separated-line"></div> -->
                <!-- <p>{{ item.majorName }}</p> -->
                <!-- <p>关联课程：《{{ item.courseName }}》</p> -->
              </div>
              <div class="test-details">
                <p>《{{ item.majorName }}》</p>
              </div>
              <div class="test-times">
                {{ $t("locale.pc.mytest.testTrain.t16") }}
                {{ trimDate(item.examinationStartDate) }} -
                {{ trimDate(item.examinationDeadlineDate) }}
              </div>
              <i-button
                class="ivu-btn"
                v-if="my_paper_list.indexOf(item.courseId) != -1"
                @click="handleStart(item.id)"
                >{{ $t("locale.pc.mytest.testTrain.t17") }}</i-button
              >
              <i-button
                class="ivu-btn"
                v-else
                @click="toPath('/coursedetail?id=' + item.courseId)"
                >{{ $t("locale.pc.mytest.testTrain.t18") }}</i-button
              >
              <!-- <i-button class="ivu-btn" @click="handleStart(item.id)"
                >开始{{
                  type == 1 || type == 3 ? "练习" : type == 2 ? "考试" : null
                }}</i-button
              > -->
              <div
                class="teststate"
                v-if="my_paper_list.indexOf(item.courseId) != -1"
              >
                <p>{{ $t("locale.pc.mytest.testTrain.t19") }}</p>
              </div>
            </div>
            <div class="no-data" v-if="all_paper_list.length == 0">
              <div class="center">
                <Icon type="ios-information-circle" />
                <div class="none-text">
                  {{ $t("locale.pc.mytest.testTrain.t20") }}
                </div>
              </div>
            </div>
            <div class="pages">
              <Page
                v-if="all_paper_list.length > 0"
                :total="all_paper_list.length"
                :current="page"
                :page-size="pageSize"
                @on-change="handleChangePage"
                show-elevator
              ></Page>
            </div>
          </div>
        </div>
        <!-- 右边广告 -->
        <div class="bodyright">
          <div class="recommendtitle">
            <p>{{ $t("locale.pc.mytest.testTrain.t21") }}</p>
          </div>
          <div
            class="recommendlists"
            v-for="(item, index) in classes"
            :key="index"
            @click="linkTo('/coursedetail?id=' + item.id)"
            v-if="classes.length > 0"
          >
            <img :src="item.iconPath" />
            <a>{{ item.courseName }}</a>
            <div class="other">{{ item.majorName }} | {{ item.acName }}</div>
          </div>
          <div class="no-data" v-if="classes.length == 0">
            <div class="center">
              <Icon type="ios-information-circle" />
              <div class="none-text">
                {{ $t("locale.pc.mytest.testTrain.t22") }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getAllPaper, getPaperMine, wrongQuestions } from "~/api/test";
import {
  getOrder,
  getOrderList,
  getMyOrderList,
  getAllCourseList
} from "~/api/order";
import { getCourse } from "~/api/course";
export default {
  data() {
    return {
      page: 1,
      pageSize: 5,
      test_type: 1, //1.题库练习 2.专项考试 3.错题训练
      paper_list: [], //试卷列表
      classes: [], //推荐课程
      all_paper_list: [], //全部试卷
      all_course_list: [] //全部课程
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      major_list(state) {
        return state.major_list;
      },
      buy_record_list(state) {
        return state.buy_record_list;
      },
      course_record_list(state) {
        return state.course_record_list;
      }
    }),
    my_paper_list() {
      // console.log(this.paper_list.map(i=>i.id));
      return this.buy_record_list.map(i => i.courseId);
    },
    data_list() {
      return this.$store.state.course_record_list.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
    data_paper_list() {
      return this.paper_list.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
    data_my_paper_list() {
      return this.all_paper_list.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
    type() {
      let type = this.$route.query.type;
      type = type ? Number(type) : 1;
      return type;
    },
    sub_title() {
      // if (this.type == 1) {
      //   return "题库练习";
      // } else if (this.type == 2) {
      //   return "专项考试";
      // } else if (this.type == 3) {
      //   return "错题训练";
      // }
      if (this.type == 1) {
        return this.$t("locale.pc.mytest.testTrain.t23");
      } else if (this.type == 2) {
        return this.$t("locale.pc.mytest.testTrain.t24");
      }
    },
    course_list_ids() {
      return this.all_course_list.map(i => i.id);
    }
  },
  watch: {
    // course_record_list(new_val, old_val) {
    //   if (new_val.length !== old_val.length) {
    //     this.getTestPapers(
    //       new_val.map(i => {
    //         return {
    //           ...i,
    //           courseId: i.id
    //         };
    //       })
    //     );
    //   }
    // }
  },
  methods: {
    ...mapActions(["initMajorList", "initBuyCourseRecord", "initBuyRecord"]),
    ...mapMutations(["SET_IS_LOADING", "SET_COURSE_RECORD_LIST"]),
    toPath(path) {
      this.$router.push(path);
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
      } else {
        return this.$t("locale.pc.mytest.testTrain.unknow");
      }
    },
    changeType(type) {
      console.log("type", type);
      console.log("test_type", this.test_type);
      this.page = 1;
      this.test_type = Number(type);
      this.$router.push({
        path: "",
        query: {
          type
        }
      });
      if (Number(type) == 2) {
        // this.getTestPapers(
        //   this.course_record_list.map(i => {
        //     return {
        //       ...i,
        //       courseId: i.id
        //     };
        //   })
        // );
        // this.getTestPapers(buy_record_list);
        this.getAllTestPapers();
      } else {
        this.initData();
      }
      this.test_type = Number(this.type);
    },
    handleChangePage(n) {
      this.page = n;
    },
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    async getTestPapers(buy_record_list) {
      this.SET_IS_LOADING(false);
      let params = {
        courseId: JSON.stringify(buy_record_list.map(i => i.courseId))
      };
      let result = await getPaperMine(params);
      console.log("获取我的试卷：", result);
      if (result && result.data && result.data.code == 200) {
        this.paper_list = result.data.data;
        this.SET_IS_LOADING(false);
      } else {
        this.$Message.error(this.$t("locale.pc.mytest.testTrain.t25"));
        this.SET_IS_LOADING(false);
      }
    },
    async getAllTestPapers() {
      this.SET_IS_LOADING(false);

      let result = await getAllPaper();
      if (result && result.data && result.data.code == 200) {
        console.log("全部试卷", result.data.data);
        this.all_paper_list = result.data.data.rows;
        this.SET_IS_LOADING(false);
      } else {
        this.$Message.error(this.$t("locale.pc.mytest.testTrain.t25"));
        this.SET_IS_LOADING(false);
      }
    },
    async getCoursesMine() {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        return;
      }
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id
      };
      let result = await getOrderList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        this.SET_COURSE_RECORD_LIST(result.data.data);

        this.getTestPapers(
          result.data.data.map(i => {
            return {
              ...i,
              courseId: i.courseId
            };
          })
        );
      } else {
        this.$Message.error(this.$t("locale.pc.mytest.testTrain.t25"));
        this.SET_IS_LOADING(true);
      }
    },
    async getMyCoursesMine() {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        return;
      }
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id
      };
      let result = await getMyOrderList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        console.log("我的课程", result.data.data.rows);
        this.all_course_list = result.data.data.rows;
        // this.SET_COURSE_RECORD_LIST(result.data.data.rows);
        // this.getTestPapers(result.data.data.rows);
      } else {
        this.$Message.error(this.$t("locale.pc.mytest.testTrain.t25"));
        this.SET_IS_LOADING(true);
      }
    },
    async getAllCoursesMine() {
      this.SET_IS_LOADING(true);

      let result = await getAllCourseList();
      // console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        console.log("全部课程", result.data.data.rows);
        this.SET_COURSE_RECORD_LIST(result.data.data.rows);
      } else {
        this.$Message.error(this.$t("locale.pc.mytest.testTrain.t25"));
        this.SET_IS_LOADING(true);
      }
    },
    initData() {
      // if (process.client) {
      //   if (!this.token && Object.keys(this.user_info).length == 0) {
      //     this.$router.replace("/login");
      //     return;
      //   }
      // }
      if (!this.type) {
        this.$router.replace({
          path: "",
          query: {
            type: 1
          }
        });
      } else {
        this.test_type = Number(this.type);
      }
      // this.getCoursesMine();
      this.getMyCoursesMine();
    },
    handleStart(id) {
      if (this.type == 2) {
        this.$router.push({
          path: "/profile",
          query: {
            type: this.type,
            id
          }
        });
      } else {
        this.$router.push({
          path: "/test_review",
          query: {
            type: this.type,
            id
          }
        });
      }
    },
    async getRecCourse() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 4,
        sort: "sortIndex desc",
        isRec: 1
      };
      let result = await getCourse(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.classes = result.data.data.rows;
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.mytest.testTrain.t25") + result &&
            result.data &&
            result.data.msg
        );
      }
    }
  },
  created() {
    this.initData();
    this.initMajorList();
    this.getRecCourse();
    this.getAllCoursesMine();
    this.getAllTestPapers();
  }
};
</script>

<style lang="scss">
.page-test_train {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-color: #f2f2f2;
  .coursepos {
    width: 1250px;
    height: 100%;
    margin: 0px auto;
    .breadcrumb-box {
      padding: 34px 0;
      border-bottom: 1px solid #e5e5e5;
      font-size: 14px;
      color: #333;
      vertical-align: middle;
      .breadcrumb-item {
        float: left;
      }
      .breadcrumb-arrow {
        float: left;
        vertical-align: middle;
        margin: 0 5px;
      }
      &::after {
        content: "";
        display: block;
        clear: both;
      }
    }
    // 菜单栏
    .menubar {
      width: 100%;
      // height: 181px;
      line-height: 20px;
      background-color: #ffffff;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
      padding: 0px 40px;
      overflow: hidden;
      margin-bottom: 19px;
      // padding-bottom: 10px;
      .menubarlist {
        // border-bottom: 1px dashed #bbbbbb;
        display: flex;
        height: 60px;
        width: 100%;
        .listname > p {
          width: 77px;
          color: rgba(57, 57, 57, 1);
          font-size: 14px;
          text-align: left;
          font-family: Roboto-regular;
          line-height: 60px;
        }
        .listbody {
          display: flex;
          > a {
            line-height: 60px;
            margin-right: 43px;
            text-decoration: none;
          }
          > a:hover {
            color: var(--theme-color);
          }
        }
      }
    }

    .menubarbody {
      width: 100%;
      height: 100%;
      display: flex;
      margin-bottom: 10px;
      //  主体左边
      .bodyleft {
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0);
        width: 1010px;
        background-color: #ffffff;
        position: relative;
        // 分页按钮
        // 选项
        .options {
          border-bottom: 1px solid #bbbbbb;
          height: 55px;
          display: flex;
          line-height: 55px;
          padding: 0px 40px;
          > a {
            margin-right: 76px;
            text-decoration: none;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
          > a:hover {
            color: #bbbbbb;
          }
          > p {
            padding-right: 76px;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
        }
        // 课程展示
        .topiclists {
          width: 100%;
          padding: 10px;
          .pages {
            margin-top: 12px;
            text-align: center;
            // position: absolute;
            // right: 58px;
            // bottom: 10px;
          }
          // 主体
          .topicbody {
            position: relative;
            width: 945px;
            height: 175px;

            margin: 10px auto;
            border-radius: 4px;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0);
            .topic-img {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 225px;
              height: 150px;
              float: left;
              margin: 13px 9px;
              border-radius: 2px;
              overflow: hidden;
              > img {
                width: 100%;
                height: auto;
              }
            }
            .papername > p {
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 22px;
              padding-top: 15px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 33px;
              text-decoration: none;
            }
            .papername .title {
              height: 77px;
              padding-right: 100px;
              overflow: hidden;
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .papermessage {
              display: flex;
              padding-top: 8px;
              .separated {
                width: 1px;
                margin: 0px 11px;
                height: 20px;
                background: #9b9b9b;
              }
              p {
                font-family: SourceHanSansSC;
                font-weight: 400;
                font-size: 14px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 20px;
                text-decoration: none;
              }
            }
            .paperdetail {
              > ul {
                > li {
                  display: flex;
                  margin: 10px 0px;
                  > img {
                    width: 22px;
                    height: 22px;
                    margin-right: 8px;
                  }
                  > p {
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgb(16, 16, 16);
                    font-style: normal;
                    letter-spacing: 0px;
                    line-height: 22px;
                    text-decoration: none;
                  }
                }
              }
            }
            .ivu-btn {
              position: absolute;
              right: 28px;
              bottom: 14px;
              width: 100px;
              height: 40px;
              background-color: var(--theme-color);
              border: none;
              color: rgb(255, 255, 255);
              border-radius: 4px;
              font-size: 14px;
              text-align: center;
              font-weight: normal;
              font-style: normal;
              opacity: 1;
            }
            .teststate {
              position: absolute;
              right: 0px;
              top: 0px;
              width: 72px;
              height: 31px;
              background-color: var(--theme-color);
              border: none;
              box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px 0px;
              border-radius: 0px 4px;
              > p {
                color: #fff;
                font-size: 14px;
                padding: 0px;
                text-align: center;
                line-height: 31px;
                font-weight: normal;
                font-style: normal;
              }
            }
            .unshow {
              display: none;
            }
            .test-details {
              display: flex;
              margin: 3px 0px;
              > p {
                font-family: Roboto;
                font-weight: 400;
                font-size: 12px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 20px;
                text-decoration: none;
              }
              .separated-line {
                width: 1px;
                height: 20px;
                margin: 0px 18px;
                background: #d9d8d8;
              }
            }
            .test-times {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 12px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 18px;
              text-decoration: none;
            }
          }
        }
      }
      // 主体右边
      .bodyright {
        width: 219px;
        background-color: #ffffff;
        flex: 1;
        margin-left: 20px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        // 广告
        .recommendtitle {
          border-bottom: 1px solid #bbbbbb;
          height: 55px;
          padding-left: 24px;
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 14px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 55px;
            text-decoration: none;
          }
        }
        .recommendlists {
          margin: 17px 22px 29px 22px;
          > img {
            width: 175px;
            height: 132px;
            border-radius: 2px;
            margin-bottom: 6px;
          }
          > a {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 14px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 18px;
            text-decoration: none;
          }
          > a:hover {
            color: #5b5b5b;
          }
          .other {
            margin-top: 4px;
          }
        }
      }
    }
  }
  .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    .center {
      > i {
        font-size: 80px;
        color: var(--theme-color);
      }
      .none-text {
        // width: 100%;
        display: block;
        margin: 15px 0;
        font-size: 16px;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>
